<template>
  <div class="home_data">
    <div class="common_bg"></div>
    <div class="container">
      <div class="school_box" @click="showSchoolSelect = true">
        <span>{{schoolName}}</span>
        <i class="icon_down"></i>
      </div>

      <div class="echarts_box">
        <div class="title">
          <i></i>
          <span>{{schoolName}}{{this.year}}学年销售情况按月分布</span>
        </div>
        <div class="echarts"  style="width:100%;" id="homeEcharts"></div>
        <div class="home_info">
          <div class="left">
            <div class="info_item">
              <div>
                <span>本学年目标业绩</span>
                <span class="info_number">{{homeData.targetPerformanceForYear}}元</span>
              </div>
            </div>
            <div class="info_item">
              <div>
                <span>年度业绩完成率</span>
                <span class="info_number">{{homeData.completionRateForYear}}</span>
              </div>
            </div>
            <div class="info_item">
              <div>
                <span>已缴费学员数</span>
                <span class="info_number">{{homeData.studentNumber}}人</span>
              </div>
            </div>
          </div>
          <div class="line"></div>
          <div class="right">
            <div class="info_item">
              <div>
                <span>本学年累计销售额</span>
                <span class="info_number">{{homeData.cumulativeSalesForYear}}元</span>
              </div>
            </div>
            <div class="info_item">
              <div>
                <span>当月销售额</span>
                <span class="info_number">{{homeData.monthCumulativeSalesForYear}}元</span>
              </div>
            </div>
            <div class="info_item">
              <div>
                <span>当前员工数目</span>
                <span class="info_number">{{homeData.employeesNumber}}人</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <van-popup v-model="showSchoolSelect" position="bottom" :style="{ height: '40%' }">
      <van-picker
        show-toolbar
        title="请选择"
        value-key="label"
        :columns="schoolList"
        @cancel="onCancel"
        @confirm="onConfirm"
      />
      </van-popup>


  </div>
</template>

<style  scoped>
.line {
  width: 1px;
  height: 5rem;
  background: #E2DDDD;
  margin-top: -0.7rem;
  transform: scale(.65)
}
.icon_down {
  display: inline-block;
  background: url('../../../assets/img/icon_left.png') 0 0 no-repeat;
  background-size: contain;
  width: .16rem;
  height: .333333rem;
  transform: rotate(-90deg);
  margin-left: .266667rem;
}
.home_info {
  display: flex;
  justify-content: space-around;;
  margin-top: .613333rem;
  align-items: center;
}

.info_item {
  font-size: 12px;
  color: #999999;
  display: flex;
  /* align-items: center; */
  margin-bottom: .64rem;
}
.info_item span {
  display: block;
}
.info_item > div {
  margin-left: .206667rem;
}

.left .info_item:nth-child(1):before {
  content: '';
  display: inline-block;
  width: .493333rem;
  height: .506667rem;
  background: url('../../../assets/img/home_icon1.png') 0 0 no-repeat;
  background-size: contain;
  margin-top: 2px;
}
.left .info_item:nth-child(2):before {
  content: '';
  display: inline-block;
  width: .506667rem;
  height: .466667rem;
  background: url('../../../assets/img/home_icon2.png') 0 0 no-repeat;
  background-size: contain;
  margin-top: 2px;
}
.left .info_item:nth-child(3):before {
  content: '';
  display: inline-block;
  width: .506667rem;
  height: .533333rem;
  background: url('../../../assets/img/home_icon3.png') 0 0 no-repeat;
  background-size: contain;
  margin-top: 2px;
}

.right .info_item:nth-child(1):before {
  content: '';
  display: inline-block;
  width: .466667rem;
  height: .466667rem;
  background: url('../../../assets/img/home_icon4.png') 0 0 no-repeat;
  background-size: contain;
  margin-top: 2px;
}
.right .info_item:nth-child(2):before {
  content: '';
  display: inline-block;
  width: .466667rem;
  height: .466667rem;
  background: url('../../../assets/img/home_icon5.png') 0 0 no-repeat;
  background-size: contain;
  margin-top: 2px;
}
.right .info_item:nth-child(3):before {
  content: '';
  display: inline-block;
  width: .52rem;
  height: .48rem;
  background: url('../../../assets/img/home_icon6.png') 0 0 no-repeat;
  background-size: contain;
  margin-top: 2px;
}

.home_data .school_box {
  width: 80%;
  height: 1rem;
  margin: 0 auto;
  background:rgba(255,255,255, .4);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: .506667rem;
  font-size: 14px;
  color: #fff;
}

.home_data .echarts_box {
  margin-top: .426667rem;
  border-radius: .506667rem;
  background: #fff;
  min-height: 150px;
  overflow: hidden;
  box-shadow:0px 0px 3px 2px rgba(230,230,230,0.5);
  /* margin-bottom: .4rem; */
}
.home_data .container {
  margin-bottom: .4rem;
}
.home_data .title {
  font-size: 14px;
  color: #485465;
  height: 1.026667rem;
  display: flex;
  align-items: center;
  padding-left: .546667rem;
}
.title i {
  width: .533333rem;
  height: .533333rem;
  background: url('../../../assets/img/homeData_icon1.png') 0 0 no-repeat;
  background-size: contain;
  margin-right: .373333rem;
}
/* .info_item span {

} */
.info_number {
  color: #6D7278;
}
#homeEcharts {
  height: 5.066667rem;
  background: #FAFBFD;
}
</style>

<script>
import {
  createNamespacedHelpers
} from "vuex";
let {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} = createNamespacedHelpers("homeData");
export default {
  data() {
    return {
      jwtAuth: {},
      showSchoolSelect: false,
      year: '',
      schoolId: '',
      schoolName: '',
      schoolList: [],
      homeData: {},
    }
  },
  created() {
    let date = new Date();
    this.year = date.getFullYear();
    let month = date.getMonth() + 1;
    if(month < 9) {
      this.year -= 1
    }
  },
  mounted() {
    this.jwtAuth = JSON.parse(sessionStorage.getItem('jwtAuth'))
    this.queryAllSchool();
  },
  methods: {
    ...mapMutations([
      "updateInfo",
    ]),
    ...mapActions([
      "formGet",
      "post"
    ]),

    queryAllSchool() {
      let accountId
      this.jwtAuth.schoolId == '' ? accountId = '' : accountId = this.jwtAuth.accountId
      this.post({
        API: 'queryAllSchool',
        data: {
          accountId: accountId,
          menuId: '',
          schoolIds: this.jwtAuth.schoolId.split(','),
        }
      }).then(res => {
        res.map((val) => {
          val.label = val.schoolName;
          val.id = val.schoolId;
        })

        this.schoolList = res
        
        this.schoolId = this.schoolList[0].schoolId;
        this.schoolName = this.schoolList[0].schoolName;
        // this.getSchoolInfo(this.schoolId);
        this.initData();
      }).catch(err => {
        // this.$message.error(err)
      })
    },

    // changeSchool(e) {
    //   this.getSchoolInfo(e);
    //   if(e == '') {
    //     this.schoolId = ''
    //   }
    //   this.initData()
      
    // },

    getSchoolInfo(id) {
      this.schoolList.forEach(item => {
        if(item.schoolId == id) {
          this.schoolName = item.schoolName
        }
        if(item.schoolName == '总服务部') {
          item.schoolId = '';
        }
      })
    },

    initData() {
      this.formGet({
        API: 'homeScreenDisplay',
        data: {
          schoolId: this.schoolId
        }
      }).then(res => {
        this.homeData = res;
        this.initEcharts(res.bmTargetYearChildList);
      }).catch(err => {
        
      })
    },

    initEcharts(data) {
      let myChart = this.$echarts.init(document.getElementById("homeEcharts"));
      let targetData = [];
      let completeData = [];
      let monthCumulativeCompleteData = [];
      let monthData = ['9月', '10月', '11月', '12月', '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月']
      
      let date = new Date();
      let currentMonth = (Number(date.getMonth()) + 1);
      let currentYear = date.getFullYear();
      console.log(currentMonth)
      if(currentMonth < 9) {
        currentMonth += 12;
        monthData[0] = `${currentYear-1}年9月`
        monthData[4] = `${currentYear}年1月`
      }
      let currentMonthIndex = currentMonth - 9

      data.forEach((item, index) => {
        if(index <= currentMonthIndex) {
          completeData.push(item.monthComplete)
        }
        monthCumulativeCompleteData.push(item.monthCumulativeComplete)
        targetData.push(item.monthTargetPrice)

      })

      let option = {
          color: ['#FBA56C','#D690E6', '#8B9DFB'],
          dataZoom:[{
            type: 'inside',//图表下方的伸缩条
            show : true, //是否显示
            realtime : true, //拖动时，是否实时更新系列的视图
            start : 0, //伸缩条开始位置（1-100），可以随时更改
            end : 40, //伸缩条结束位置（1-100），可以随时更改
          }],
          grid: {
            left: '3%',
            right: '3%',
            bottom: '5%',
            containLabel: true,
            // show: true,
            // backgroundColor: '#FAFBFD',
          },
          legend: {       // 图例
            data: ['年度规划分月目标(元)','月度拆解目标(元)', '本月实际完成业绩(元)'],
            icon: 'circle',
            type: 'scroll',
            top: '5%',
            right: '5%',
            left: '5%',
            textStyle: {
              color: "#485465",
              fontSize: 12,
              fontWeight: 400,
            },
            itemWidth: 7,
            itemHeight: 7,
            itemGap: 35,
          },
          tooltip : {
            trigger: 'axis',
            axisPointer : {  
              type : 'shadow',
              shadowStyle: {
                color: 'rgba(150,150,150,0.15)',
              } 
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            
            axisLabel: {        // x轴 标签
              show: true,
              textStyle: {
                color: "#485465",
                fontSize: 12,
                fontWeight: 400
              }
            },
            data: monthData
          },
          yAxis: {
            type: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#D6D6D6',
                type: 'dashed',
                width: .5
              }
            },
            axisLabel: {        // x轴 标签
              show: true,
              textStyle: {
                color: "#485465",
                fontSize: 12,
                fontWeight: 400
              }
            }
          },
          series: [
            {
              name: '年度规划分月目标(元)',
              data: targetData,
              type: 'line',
              smooth: 0.4,
              symbol: 'none',
              lineStyle: {
                width: 1.5,
              },
              areaStyle: {
                  normal: {
                      color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                          offset: 0,
                          color: '#FCDBC4'
                      }, {
                          offset: 1,
                          color: '#fff'
                      }])
                  }
              },
            },
            {
              name: '月度拆解目标(元)',
              data: monthCumulativeCompleteData,
              type: 'line',
              smooth: 0.4,
              symbol: 'none',
              lineStyle: {
                width: 1.5,
              },
              areaStyle: {
                  normal: {
                      color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                          offset: 0,
                          color: '#D690E6'
                      }, {
                          offset: 1,
                          color: '#fff'
                      }])
                  }
              },
            },
            {
              name: '本月实际完成业绩(元)',
              data: completeData,
              type: 'line',
              smooth: 0.4,
              symbol: 'none',
              lineStyle: {
                width: 1.5,
              },
              areaStyle: {
                  normal: {
                      color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                          offset: 0,
                          color: '#C1CAFA'
                      }, {
                          offset: 1,
                          color: '#fff'
                      }])
                  }
              },
            },
            
          ]
      };

      myChart.setOption(option, true);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },

    onConfirm(value, index) {
      console.log(`当前值：${value.id || value}, 当前索引：${index}`)
      this.schoolId = value.id;
      this.schoolName = this.schoolList[index].schoolName;

      this.initData()
      this.showSchoolSelect = false;

    },
    onCancel() {
      this.showSchoolSelect = false;
    },
  },
  computed: {
    homeYear() {
      let year = new Date().getFullYear();
      let month = new Date().getMonth() + 1;

      if(month < 9) {
        return `${year-1}年9月至${year}年8月`
      }else{
        return `${year}年9月至${year+1}年8月`
      }
    }
  },
}
</script>